import 'package:flutter/material.dart';
import 'package:homepad/iot/light_color.dart';
import 'package:homepad/models/nova_model.dart';
import 'package:provider/provider.dart';

class PanelColor extends StatelessWidget {
  final GestureTapCallback? onCancel;
  final LightColor node;
  const PanelColor({super.key, required this.node, this.onCancel});

  final titleStyle = const TextStyle(
    color: Colors.white,
    fontSize: 19,
    fontFamily: "PingFangLight",
    letterSpacing: 0.45,
  );

  @override
  Widget build(BuildContext context) {
    var onOff = context.select<NovaModel, bool>((nova) => (nova.config.getNode(node.endpointId) as LightColor).onOff) ;
    var lightness = context.select<NovaModel, int>((nova) => (nova.config.getNode(node.endpointId) as LightColor).lightness);
    var ct = context.select<NovaModel, int>((nova) => (nova.config.getNode(node.endpointId) as LightColor).ct);
    var hue = context.select<NovaModel, int>((nova) => (nova.config.getNode(node.endpointId) as LightColor).hue);
    var saturation = context.select<NovaModel, int>((nova) => (nova.config.getNode(node.endpointId) as LightColor).saturation);

    final textStyle = Theme.of(context).textTheme.titleLarge!.copyWith(color: Colors.white, fontSize: 22);

    return Scaffold(
      appBar: AppBar(
        leadingWidth: 20,
        title: Text(node.name, style: titleStyle.copyWith(fontSize: 20)),
        backgroundColor: const Color.fromARGB(255, 50, 50, 50),
        primary: false,
        actions: [
          TextButton(
            onPressed: onCancel,
            child: Padding(
                padding:
                const EdgeInsets.symmetric(horizontal: 25, vertical: 10),
                child: Text("返回",
                    style: titleStyle.copyWith(color: Colors.redAccent))),
          ),
          const SizedBox(width: 5),
        ],
      ),
      body: Container(
        color: Colors.black,
        padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text("开关", style: textStyle),
                  const SizedBox(width: 20),
                  Switch(
                    value: onOff,
                    onChanged: (value) {
                      node.setOnOff(value);
                    },
                  ),
                ],
              ),
              const SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text("亮度", style: textStyle),
                  Flexible(
                    child: Slider(
                        value: lightness.toDouble(),
                        max: 100,
                        divisions: 20,
                        min: 0,
                        label: lightness.toString(),
                        onChanged: (value) {
                          node.setLightness(value.toInt());
                        },
                        onChangeEnd: (value) {
                        }),
                  ),
                  Text("$lightness%", style: textStyle),
                ],
              ),
              const SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text("色温", style: textStyle),
                  Flexible(
                    child: Slider(
                      value: ct.toDouble(),
                      max: 6500,
                      divisions: 76,
                      min: 2700,
                      label: ct.toString(),
                      onChanged: (value) {
                        node.setColorTemperature(value.toInt());
                      },
                    ),
                  ),
                  Text("${ct.toString()}k", style: textStyle.copyWith(fontSize: 20)),
                ],
              ),

              const SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text("颜色", style: textStyle),
                  Flexible(
                    child: Slider(
                      value: hue.toDouble(),
                      max: 360,
                      divisions: 360,
                      min: 0,
                      label: hue.toString(),
                      onChanged: (value) {
                        node.setHue(value.toInt());
                      },
                    ),
                  ),
                  Text(hue.toString(), style: textStyle),
                ],
              ),

              const SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text("饱和度", style: textStyle),
                  Flexible(
                    child: Slider(
                      value: saturation.toDouble(),
                      max: 100,
                      divisions: 100,
                      min: 0,
                      label: saturation.toString(),
                      onChanged: (value) {
                        node.setSaturation(value.toInt());
                      },
                    ),
                  ),
                  Text(saturation.toString(), style: textStyle),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
